<template>
  <div>
    <div class="container">
      <!-- 顶部小说的推荐区域 -->
      <div class="main">
        <!-- 推荐小说区域 -->
        <div class="recommended">
          <!-- 推荐小说区域 -->
          <div class="item" v-for="(item,index) in xiaoshuoList" :key="index">
            <!-- 左边的图片 -->
            <div class="image" @click="imgClickFn(item.name)">
              <router-link :to="{path:`/chapter/${item.href}`}">
                <img :src="item.img" alt="" class="left">
              </router-link>
            </div>

            <!-- 右边的简介 -->
            <dl>
              <dt>
                <span>{{item.zuozhe}}</span>
                <a style="color:#6F78A7">{{item.name}}</a>
              </dt>
              <dd>{{item.jianjie}}</dd>
            </dl>
          </div>

        </div>

        <div class="NovelList">
          <NovelList :searchResult="Novelist"></NovelList>
        </div>

      </div>

    <div id="noverllist1">
        <!-- 中间分类推荐区域 -->
      <div class="ClassiFication">

        <div v-for="(item,index) in Classification.slice(0,3)" :key="index">
          <ClassiFication :content="item" :classification="noveList1.slice(index=index*10,index+10)"></ClassiFication>
        </div>

      </div>
    </div>

     <div id="noverllist2">
        <!-- 中间分类推荐区域 -->
      <div class="ClassiFication">

        <div v-for="(item,index) in Classification.slice(3,6)" :key="index">
          <ClassiFication :content="item" :classification="noveList2.slice(index=index*10,index+10)"></ClassiFication>

        </div>

      </div>
    </div>
      <!-- 底部最新更新小说列表 -->
      <div class="bottom">
       <div class="newloadnlvel">
        <h3 v-show="List.length!==0">最新更新小说列表</h3>
         <List :searchResult=List></List>
       </div>
        <div class="newNovel">
           <h3 v-show="putinStorage.length!==0">最新入库小说</h3>
          <NewList :searchResult="putinStorage"></NewList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import List from '@/components/List/index.vue'
import NovelList from '@/components/NovelList/index.vue'
import ClassiFication from '@/components/ClassiFication'
import NewList from '@/components/newList/newList.vue'
export default {
  name: 'Ho-me',
  data () {
    return {
      xiaoshuoList: [], // 首页顶部推荐小说
      List: [], // 首页底部最近更新的小说列表
      // 首页强推小说
      Novelist: [],
      // 分类顶部推荐小说
      Classification: [],
      // 分类小说底部推荐
      classificationbottom: [],
      noveList1: [],
      noveList2: [],
      i: 0,
      putinStorage: []
    }
  },
  components: {
    List,
    NovelList,
    ClassiFication,
    NewList
  },

  async created () {
    // 请求小说首页信息
    const res = await this.$API.reqGetxiaoshuo()
    this.xiaoshuoList = [...this.xiaoshuoList, ...res.data.headerBook]
    this.List = res.data.RecentlyNovel
    this.Novelist = res.data.Novelist
    this.Classification = res.data.Classification
    this.classificationbottom = res.data.ClassiFicationrecommended
    this.noveList1 = this.classificationbottom.slice(0, 30)
    this.noveList2 = this.classificationbottom.slice(30, 60)
    this.putinStorage = res.data.putinStorage
  },
  methods: {
    imgClickFn (name) {
      this.$store.commit('SETNAME', name)
    }
  }
}
</script>
<style lang="less" scoped>
img {
  width: 100px;
  height: 150px;
}
.main {
  display: flex;
}
.recommended {
  height: 330px;
  background: #fef9ef;
  border: 3px solid #c3dfea;
  width: 800px;
  // float: left;
  padding: 10px 10px 0 10px;
  margin: 0 0 0 50px;
  .item:nth-child(2n) {
    margin-left: 100px;
  }
  .item {
    padding-bottom: 15px;
    width: 335px;
    float: left;
    .image {
      float: left;
      width: 120px;
    }
    dl {
      float: right;
      padding-right: 15px;
      width: 200px;

      dt {
        border-bottom: 1px dashed gray;
        padding-bottom: 5px;
      }
      span {
        float: right;
      }
      dd {
        padding-top: 5px;
        // 溢出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;

        -webkit-line-clamp: 5; // 超出多少行

        -webkit-box-orient: vertical;
        line-height: 150%;
      }
    }
    //  span{
    //   padding-right: 10px;
    //     float: right;
    //   }
  }
}
.NovelList {
  margin: 0;
  height: 346px;
}
.ClassiFication{
  display: flex;
  div{
    flex:1;
  }
  .content{
    margin: 0;
  }
}
#noverllist1,#noverllist2{
  border: 3px solid #A6D3E8;
  margin: 15px 71px 15px 50px;;
}
.newloadnlvel{
  margin: 0;
  h3{
    margin: 15px 0 0 50px;
  }
}
.newNovel{
  margin-left: 17px;
  h3{
    margin: 15px 0 0 50px;
  }
}
.bottom{
  display: flex;
  padding: 0 70px 0 0;
}
</style>
